<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面走丢了</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="image/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 404页面特有样式 */
        .error-container {
            text-align: center;
            max-width: 500px;
            margin: 0 auto;
            padding: 40px;
            position: relative;
            z-index: 5;
        }
        
        .error-code {
            font-size: 120px;
            font-weight: bold;
            color: #4ecdc4;
            margin-bottom: 20px;
            text-shadow: 0 0 15px rgba(78, 205, 196, 0.5);
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .error-message {
            font-size: 24px;
            color: white;
            margin-bottom: 30px;
        }
        
        .error-description {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 40px;
        }
        
        .back-home-btn {
            display: inline-block;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 15px 30px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }
        
        .back-home-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(255, 107, 107, 0.6);
        }
        
        .back-home-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -60%;
            width: 20%;
            height: 200%;
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(25deg);
            transition: all 0.7s;
        }
        
        .back-home-btn:hover::after {
            left: 120%;
        }
        
        .astronaut {
            width: 150px;
            height: 150px;
            margin: 0 auto 30px;
            background-image: url('image/astronant.jpg');
            background-size: cover;
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            animation: orbit 10s linear infinite;
            position: relative;
        }
        
        @keyframes orbit {
            0% { transform: rotate(0deg) translateX(10px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(10px) rotate(-360deg); }
        }
        
        .stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }
        
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }
        
        @keyframes twinkle {
            0% { opacity: 0.5; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 0.5; transform: scale(0.8); }
        }
    </style>
</head>
<body>
    <!-- 背景星星效果 -->
    <div class="stars"></div>
    
    <!-- 404错误内容 -->
    <div class="error-container">
        <!-- 宇航员图标 -->
        <div class="astronaut"></div>
        
        <!-- 错误代码 -->
        <div class="error-code">404</div>
        
        <!-- 错误信息 -->
        <div class="error-message">嘿！您似乎迷路了</div>
        
        <!-- 错误描述 -->
        <div class="error-description">
            您要找的页面可能已经去了太空探索，<br>
            但别担心，我们可以带您回到安全的地方！
        </div>
        
        <!-- 返回主页按钮 -->
        <a href="index.html" class="back-home-btn">
            <i class="fas fa-home"></i> 返回主页
        </a>
    </div>
    
    <div class="footer">
        <i class="fas fa-shield-alt"></i> 安全认证系统 | © 2023 云服务器管理平台
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 创建背景星星效果
            const starsContainer = document.querySelector('.stars');
            const starsCount = 50;
            
            for (let i = 0; i < starsCount; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                
                // 随机位置
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                const size = Math.random() * 2 + 1;
                const delay = Math.random() * 3;
                
                star.style.left = `${x}%`;
                star.style.top = `${y}%`;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.animationDelay = `${delay}s`;
                
                starsContainer.appendChild(star);
            }
        });
    </script>
</body>
</html>
